<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据的双向绑定</title>
    <script src="js/vue.js"></script>
</head>
<body>

<!--    双向数据绑定  界面变化=>模型变化=>界面变化-->
<div id="app">
<!--    v-model在进行双向绑定时，绑定的是input事件，那么会在每次内容输入后就将最新的值绑定
的属性进行同步；-->
    <input type="text" v-model="name">  {{name}}
    <hr>
    {{sayHi()}}
    <hr>
<!--    [2]取下标为2的值=>3 -->
    {{[1,2,3,4,5][2] }}
    <hr>
<!--    此处需要注意留空格 -->
    {{{name:"张三",age:19} }}
    <hr>
    {{{name:"张三",age:19}.name }}
</div>

<script>
    new Vue({
        el:"#app",
        data:{
            name:"xxx"
        },
        methods:{
            sayHi:function (){
                return "hello vue"
            }
        }
    });
</script>

</body>
</html>